import React, { useState } from 'react'
import '../scss/zxr.scss'
import { UserOutlined, LockOutlined, MessageOutlined, PhoneOutlined } from '@ant-design/icons';
import { Input, message, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import * as axios from '../axiosAPI/zxr'

export default function BackLogin() {
    let [idx, setIdx] = useState('code')
    let [name, setName] = useState('')
    let [password, setPassword] = useState('')
    let [phone, setPhone] = useState('')
    let [code, setCode] = useState('')
    let [ckcode, setCkcode] = useState('')
    let navigate = useNavigate()

    const [messageApi, contextHolder] = message.useMessage();
    let codelogin = async () => {
        let result = await axios.default.codelogin(name, password)
        if (result.state) {
            setName('')
            setPassword('')
            sessionStorage.setItem('uid', result.uid)
            sessionStorage.setItem('uname', result.uname)
            messageApi.open({
                type: 'success',
                content: '登录成功, 即将跳转至主页',
            });
            navigate('/home')
        } else {
            messageApi.open({
                type: 'error',
                content: '登录失败,请检查用户名或密码',
            });
        }
    }

    let [font, setFont] = useState('发送验证码')
    let getcode = async () => {
        let str = '0123456789'
        let c = ''
        for (let i = 0; i < 4; i++) {
            let idx = Math.floor(Math.random() * 9)
            c += str[idx]
        }
        setCode(c)
        setFlag(false)
        changefont()
        let result = await axios.default.sendcode(phone, c)
        if (result.state) {
            messageApi.open({
                type: 'success',
                content: result.mess,
            });
        } else {
            messageApi.open({
                type: 'error',
                content: result.mess,
            });
        }
    }
    let [flag, setFlag] = useState(true)

    let changefont = () => {
        let num = 60
        if (flag) {
            let t = setInterval(() => {
                --num
                setFont(`${num} s`)
                if (num === 0) {
                    setFlag(true)
                    clearInterval(t)
                    setFont('发送验证码')
                }
            }, 1000)
        }
    }

    let melogin = async () => {
        if (code !== '' || ckcode !== '') {
            if (ckcode === code) {
                let result = await axios.default.messaglogin(phone)
                if (result.state) {
                    setPhone('')
                    setCode('')
                    setCkcode('')
                    sessionStorage.setItem('uid', result.uid)
                    sessionStorage.setItem('uname', result.uname)
                    messageApi.open({
                        type: 'success',
                        content: '登录成功, 即将跳转至主页',
                    });
                    navigate('/home')
                } else {
                    messageApi.open({
                        type: 'error',
                        content: '登录失败,请检查手机号或验证码',
                    });
                }
            }
        }else{
            messageApi.open({
                type: 'error',
                content: '验证码不能为空,请检查验证码',
            });
        }
    }
    return (
        <div className='backlogin'>
            <div className="content">
                <div className="left">
                    <img src="/login.png" alt="" />
                </div>
                <div className="right">
                    <p className='title'>在线考试系统</p>
                    <ul className='nav'>
                        <li onClick={() => { setIdx('code'); setPhone(''); setCkcode(''); setCode('') }} className={idx === 'code' ? 'border' : ''}>账号密码登录</li>
                        <li onClick={() => { setIdx('mess'); setName(''); setPassword('') }} className={idx === 'mess' ? 'border' : ''}>短信验证登录</li>
                    </ul>
                    {idx === 'code' ? <div className='form'>
                        <Input
                            placeholder="请输入账号"
                            prefix={
                                <UserOutlined
                                    style={{
                                        color: '#aaaaaa',
                                    }}
                                />
                            }
                            value={name}
                            onChange={(val) => { setName(val.target.value) }}
                        />
                        <Input.Password
                            className='margin'
                            placeholder="请输入密码"
                            prefix={
                                <LockOutlined
                                    style={{
                                        color: '#aaaaaa',
                                    }}
                                />
                            }
                            value={password}
                            onChange={(val) => { setPassword(val.target.value) }}
                        />
                        <p className='forgot' onClick={() => { navigate('/forgot') }}>忘记密码</p>
                        <p className='btn'>
                            <button onClick={() => { codelogin() }}>登录</button>
                        </p>
                    </div> : <div className='form'>
                        <Input
                            placeholder="请输入手机号"
                            prefix={
                                <PhoneOutlined
                                    style={{
                                        color: '#aaaaaa',
                                    }}
                                />
                            }
                            value={phone}
                            onChange={(val) => { setPhone(val.target.value) }}
                        />
                        <Input
                            className='margin'
                            placeholder="请输入验证码"
                            prefix={
                                <MessageOutlined
                                    style={{
                                        color: '#aaaaaa',
                                    }}
                                />
                            }
                            suffix={
                                flag ? <Button onClick={() => { getcode() }} className='send'>{font}</Button> : <Button disabled={true} className='send'>{font}</Button>
                            }
                            value={ckcode}
                            onChange={(val) => { setCkcode(val.target.value) }}
                        />
                        <p className='btn' style={{ marginTop: '30px' }}>
                            <button onClick={() => { melogin() }}>登录</button>
                        </p>
                    </div>}
                </div>
            </div>
            {contextHolder}
        </div>
    )
}
